<template>
  <div class="AsideBox">
    <HeadBox
      id="HeadBox"
      @click="showMenu"
    />
    <div class="menu">
      <!-- <Item
        mode="Chat"
        placeholder="AI Chat"
      />
      <Item
        mode="Picture"
        placeholder="---------"
      /> -->
      <Item
        mode="ChangePassword"
        placeholder="ChangePassword"
      />
      <Item
        mode="LogOut"
        placeholder="LogOut"
      />
      <Item
        mode="Administrator"
        placeholder="Administrator"
      />
    </div>

    <ShowTotalTokensVue />
  </div>
</template>


<script setup>
import ShowTotalTokensVue from "./ShowTotalTokens.vue";
import HeadBox from "./HeadBox.vue";
import Item from "./Item.vue";

function showMenu() {
  // menuOut控制大小动画
  let menu = document.getElementsByClassName("menu")[0];
  if (menu.style.height == "200px") {
    menu.style.height = "0px";
  } else {
    menu.style.height = "200px";
  }
}
</script>


<style scoped>
.AsideBox {
  width: 90%;
  height: max-content;
  min-width: min-content;
  background-color: black;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 1px black;
  padding: 10px;
}

#HeadBox {
  margin: 10px;
  width: 200px;
}
#HeadBox:hover {
  cursor: pointer;
}
.cutline {
  margin-top: 5px;
  width: 100%;
  height: 1px;
  background-color: gray;
}

.menu {
  width: 100%;
  height: 0px;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}

@media screen and (max-width: 1400px) {
  #HeadBox {
    margin: 5px;
  }
}
</style>